<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tables </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet">
	<!-- Bootstrap-table -->
    <link href=.../../statics/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	
    <!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet">
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        
        <!-- page content -->
        <div class="framebody" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>新增/编辑页面布局</h3>
              </div> 
            </div>

            <div class="clearfix"></div> 
			
			<div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_content">
 					  <form class="form-horizontal form-label-left" >
		
	                      <!-- <span class="section"></span> -->
	
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input id="name" class="form-control col-md-7 col-xs-12" name="name" placeholder="both name(s) e.g Jon Doe" type="text">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Email <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input type="email" id="email" name="email"  class="form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirm Email <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input type="email" id="email2" name="confirm_email" class="form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="number">Number <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input type="number" id="number" name="number" class="form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="website">Website URL <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input type="url" id="website" name="website"  placeholder="www.website.com" class="form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Occupation <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input id="occupation" type="text" name="occupation" class="optional form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label for="password" class="control-label col-md-3">Password</label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input id="password" type="password" name="password" class="form-control col-md-7 col-xs-12" >
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Repeat Password</label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input id="password2" type="password" name="password2" class="form-control col-md-7 col-xs-12" >
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telephone <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <input type="tel" id="telephone" name="phone" class="form-control col-md-7 col-xs-12">
	                        </div>
	                      </div>
	                      <div class="item form-group">
	                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Textarea <span class="required">*</span>
	                        </label>
	                        <div class="col-md-6 col-sm-6 col-xs-12">
	                          <textarea id="textarea" name="textarea" class="form-control col-md-7 col-xs-12"></textarea>
	                        </div>
	                      </div>
	                      <div class="ln_solid"></div>
	                      <div class="form-group">
	                        <div class="col-md-6 col-md-offset-3">
	                          <a class="btn btn-danger">Cancel</a>
	                          <a id="send" class="btn btn-success">Submit</a>
	                        </div>
	                      </div>
	                    </form>
                  </div>
                </div>
              </div>
            </div>
           
        </div>
        <!-- /page content --> 
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>     
    <!-- Bootstrap-table -->
    <script src=.../../statics/plugins/bootstrap-table/bootstrap-table.js"></script>  
    <script src=.../../statics/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>  
    
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	 
    <script>
    	$(function(){
    		//定义列
	    	var columns = [ 
				{ field: 'no', title: '序号', align: 'left', 
					formatter: function (value, row, index) {
						return index+1;
					}
				},
				{ field: 'taskName', title: '流程节点', align: 'center' },   
				{ field: 'auditUserName', title: '审批人', align: 'center' }, 
				{ field: 'auditTime', title: '审批时间', align: 'center' }, 
				{ field: 'auditResult', title: '审批结果', align: 'center',
				    formatter: function(value, row, index){  
				    	if (value == "0"){
				    		return "<span class='red'>驳回</span>";
				    	}else if (value == "1"){
				    		return "同意";
				    	}
				    } 
				}, 
				{ field: 'auditRemark', title: '审批意见', align: 'center' },
				{ field: 'candidates', title: '任务待办人', align: 'center' }
			];

			//定义查询回调函数（查询参数在此设置）
			var queryParams = function(params) { 
				var startDate = '';
				var endDate = '';
				return {
					rows: params.limit, //页面大小 
		  		 	page: params.pageNumber, //页码 
		  		 	startDate: startDate,
		  		 	endDate: endDate
			  	}; 
			};
			var url = ""; //请求json数据的服务器地址
			sys.initTable('myTable', {url: url, 
				queryParams:queryParams, 
				columns: columns,  
				striped: true,
				clickToSelect: true 
			});
			
			$('#btnQuery').on('click', function(){
				sys.reloadTable('myTable');
			})
    	})
		
    </script>
  </body>
</html>